<template>
  <div class="clean">
    <van-nav-bar class="fixedTop" title="清分" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <van-cell-group>
      <van-cell
        title="请选择注册的用户类型"
        :value="regUserText"
        @click="showRegUser = true"
        isLink
       
      >
       <!-- v-if="this.user.isteam == 3 && this.user.isSupplier" -->
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-cell title="客户类型" :value="centerText" @click="showCenter = true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-field
        label="商户简称"
        v-model="merchant"
        placeholder="请输入您的商户简称"
        input-align="right"
        :error="!!$vuelidation.error('merchant')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-cell title="商户属性" :value="merAttrText" @click="showmerAttr = true" isLink>
        <span slot="right-icon" class="red">
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-field
        label="公司名称"
        v-if="centerText== '企业'"
        v-model="comOrclient"
        placeholder="请输入您的公司名称"
        input-align="right"
        :error="!!$vuelidation.error('comOrclient')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-field
        label="客户名称"
        v-if="centerText== '小微'"
        v-model="comOrclient"
        placeholder="请输入您的客户名称"
        input-align="right"
        :error="!!$vuelidation.error('comOrclient')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-cell title="行业类别" :value="hangYeText" @click="showHangYe = true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-cell title="企业地址" :value="area" @click="showArea = true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-field
        label="企业详细地址"
        v-model="bussDetail"
        placeholder="请输入您的企业详细地址"
        input-align="right"
        :error="!!$vuelidation.error('bussDetail')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field label="企业法人名字" v-model="faren" placeholder="请输入企业法人名字" input-align="right" :error="!!$vuelidation.error('faren')">
        <span slot="icon" class="red flex">*<van-icon name="edit" /></span>
      </van-field>
      <van-field
        label="企业法人手机号"
        v-model="farenPhone"
        placeholder="请输入企业法人手机号"
        input-align="right"
        :error="!!$vuelidation.error('farenPhone')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-field
        label="企业法人证件号"
        v-model="farenZj"
        placeholder="请输入企业法人证件号（可填自己的身份证）"
        input-align="right"
        :error="!!$vuelidation.error('farenZj')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field
        label="营业执照"
        v-if="centerText== '企业'"
        v-model="yingYe"
        placeholder="请填写有效的营业执照号"
        input-align="right"
        :error="!!$vuelidation.error('yingYe')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-field
        label="营业执照有效期"
        v-if="centerText== '企业'"
        v-model="yingYeTime"
        placeholder="请填写营业执照有效期"
        input-align="right"
        :error="!!$vuelidation.error('yingYeTime')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-cell title="结算方式" :value="jsText" @click="showJs = true" isLink>
        <span slot="right-icon">银行卡账户</span>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <!-- 字数要求 -->
      <van-field
        label="银行账号"
        v-model="acount"
        placeholder="请填写您的银行账号"
        input-align="right"
        :error="!!$vuelidation.error('acount')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-field
        label="开户人"
        v-model="kaiHu"
        placeholder="请填写开户人"
        input-align="right"
        :error="!!$vuelidation.error('kaiHu')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-cell title="银行账户类型" :value="zhTypeText" @click="showZhType= true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-cell title="银行卡类型" :value="yhTypeText" @click="showYhType= true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-cell title="银行行别" :value="typeText" @click="showType= true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-cell title="开户行名称" :value="$route.query.name" class="kh" @click="$router.push({name:'khname'})" isLink>
        <!-- <van-cell title="开户行名称" :value="khNameText" class="kh" @click="showKhName= true" isLink> -->
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-cell title="开户省市" :value="khArea" @click="showKhArea = true" isLink>
        <span slot="right-icon" class="red">
          *
          <van-icon name="arrow" color="gray"/>
        </span>
      </van-cell>
      <van-field label="开户人证件类型" v-model="khZjType" input-align="right">
        <span slot="icon" class="flex">身份证</span>
      </van-field>
      <van-field
        label="开户人身份证号"
        v-model="khZjHao"
        placeholder="请填写开户人身份证号"
        input-align="right"
        :error="!!$vuelidation.error('khZjHao')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
      <van-field
        label="银行预留手机号码"
        v-model="yhYlPhone"
        placeholder="请填写银行预留手机号码"
        input-align="right"
        :error="!!$vuelidation.error('yhYlPhone')"
      >
        <span slot="icon" class="red flex">
          *
          <van-icon name="edit"/>
        </span>
      </van-field>
    </van-cell-group>
    <van-cell-group v-if="centerText== '小微'">
      <van-cell v-for="(image, i) in imagesSmall" :key="i" :title="image.title" class="cell_middle">
        <van-uploader :afterRead="afterReadSmall(i)">
          <img :src="image.file.content" width="100%" v-if="image.file">
          <div v-else class="flex">
            <span class="image_text">请上传清晰照片，文字内容清楚</span>
            <div class="user_image_upload">
              <van-icon name="camera_full"></van-icon>
            </div>
          </div>
        </van-uploader>
      </van-cell>
    </van-cell-group>
    <van-cell-group v-if="centerText== '企业'">
      <van-cell v-for="(image, i) in imagesBus" :key="i" :title="image.title" class="cell_middle">
        <van-uploader :afterRead="afterReadBus(i)">
          <img :src="image.file.content" width="100%" v-if="image.file">
          <div v-else class="flex">
            <span class="image_text">请上传清晰照片，文字内容清楚</span>
            <div class="user_image_upload">
              <van-icon name="camera_full"></van-icon>
            </div>
          </div>
        </van-uploader>
      </van-cell>
    </van-cell-group>
    <van-button round type="danger" size="large" @click="validInfo">提交</van-button>
    <van-popup v-model="showType" position="bottom">
      <van-picker
        showToolbar
        :columns="typeList"
        value-key="bankName"
        title="选择银行行别"
        @confirm="onTypeConfirm"
        @cancel="showType = false"
      ></van-picker>
    </van-popup>
    <van-popup v-model="showKhName" position="bottom">
      <van-picker
        showToolbar
        :columns="khNameList"
        value-key="bankAddress"
         title="<input type='输入文字'/>"
        @confirm="onKhNameConfirm"
        @cancel="showKhName = false"
      >
      </van-picker>
    </van-popup>
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        :columns-num="2"
        title="选择省市"
        @confirm="onAreaConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
    <van-popup v-model="showKhArea" position="bottom">
      <van-area
        :area-list="areaList"
        :columns-num="2"
        title="选择开户省市"
        @confirm="onKhAreaConfirm"
        @cancel="showKhArea = false"
      />
    </van-popup>
    <van-popup v-model="showCenter" position="bottom">
      <van-picker
        showToolbar
        :columns="columns"
        title="选择客户类型"
        @cancel="showCenter = false"
        @confirm="onCenterConfirm"
      />
    </van-popup>
    <van-popup v-model="showRegUser" position="bottom">
      <van-picker
        showToolbar
        :columns="columnsRegUser"
        title="选择用户类型"
        @cancel="showRegUser = false"
        @confirm="onRegUserConfirm"
      />
    </van-popup>
    <van-popup v-model="showmerAttr" position="bottom">
      <van-picker
        showToolbar
        :columns="columnsAttr"
        title="选择商户属性"
        @cancel="showmerAttr = false"
        @confirm="onAttrConfirm"
      />
    </van-popup>
    <van-popup v-model="showHangYe" position="bottom">
      <van-picker
        showToolbar
        :columns="columnsHangYe"
        value-key="industryName"
        title="选择行业类别"
        @cancel="showHangYe = false"
        @confirm="onHangYeConfirm"
      />
    </van-popup>
    <van-popup v-model="showZhType" position="bottom">
      <van-picker
        showToolbar
        :columns="columnsZh"
        title="选择银行账户类型"
        @cancel="showZhType = false"
        @confirm="onZhConfirm"
      />
    </van-popup>
    <van-popup v-model="showYhType" position="bottom">
      <van-picker
        showToolbar
        :columns="columnsYh"
        title="选择银行卡类型"
        @cancel="showYhType = false"
        @confirm="onYhConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Uploader,
  Picker,
  Area,
  Toast,
  RadioGroup,
  Radio,
  NavBar,
  Icon
} from "vant";
import { CLEARN_INDUSTRY, CLEARN_REGISTER, CLEARN_BANK } from "@/api/user";
import axios from 'axios';
import areaList from "../module-address-edit/area.json";
import { UPLOAD_FILE } from "@/api/global";
import wxConfig from "@/vue/mixin/wx-config";
export default {
  mixins: [wxConfig],
  props: {
    code: [String],
    upname: [String],
    upxiaoqu: [String],
    upcenter: [String, Number]
  },
  data() {
    const user = this.getUser();
    return {
      platform: "",
      merchant: "",
      comOrclient: "",
      bussDetail: "",
      faren: "",
      selectedKh: "",
      farenPhone: "",
      farenEmail: "",
      farenConPer: "",
      farenConPerPhone: "",
      farenZj: "",
      farenZjTime: "",
      yingYe: "",
      yingYeTime: "",
      acount: "",
      kaiHu: "",
      khZjType: "",
      khZjHao: "",
      yhYlPhone: "",
      kfPhone: "",
      jgPhone: "",
      mark: "",
      columns: ["小微", "企业"],
      columnsRegUser: ["团长", "供应商",'服务中心'],
      columnsObj: { O: "小微", B: "企业" },
      columnsAttr: ["普通商户", "代理商户"],
      columnsHangYe: [], //行业类别
      columnsHangYeZiMu:[],//行业类别字母
      columnsZh: ["对公账户", "对私账户"],
      columnsZhObj: { corporate: "对公账户", personal: "对私账户" },
      columnsYh: ["借记卡", "贷记卡", "单位结算卡"],
      columnsYhObj: { debit: "借记卡", credit: "贷记卡", unit: "单位结算卡" },
      khChangeArr: "",
      khNameList:[],//开户行名称
      typeList: [], //银行类别
      centerText: "", //客户类型文字
      centerTextZiMu: "", //客户类型字母
      regUserText: "", //用户类型
      merAttrText: "", //商户属性
      cardText: "",
      noticeText: "",
      jsText: "",
      zhTypeText: "",
      zhTypeTextZiMu: "",
      yhTypeText: "",
      yhTypeTextZiMu: "",
      khNameText: "",
      hangYeText: "",
      hangYeTextZiMu: "", //行业列别字母
      typeText: "",
      tProvince: "",
      tCity: "",
      khProvince: "",
      khCity: "",
      areaList,
      showmerAttr: false,
      showArea: false,
      showZhType: false,
      showYhType: false,
      showKhArea: false,
      showKhName: false,
      showType: false,
      showHangYe: false,
      imagesSmall: [
        {
          title: "身份证照片(正面)",
          file:null
        },
        {
          title: "身份证照片(反面)",
          file: null
        },
        {
          title: "银行卡照片(正面)",
          file: null
        },
        {
          title: "银行卡照片(反面)",
          file: null
        },
         {
          title: "客户协议书照片",
          file: null
        }
      ],
      imagesBus: [
        {
          title: "身份证照片(正面)",
          file: null
        },
        {
          title: "身份证照片(反面)",
          file:null
        },
        {
          title: "营业执照",
          file: null
        },
        {
          title: "客户协议书照片",
          file: null
        },
        {
          title: "开户许可证或印鉴卡",
          file: null
        }
      ],
      showCenter: false,
      showRegUser: false,
      showXiaoqu: false,
      pictureImg1: "",
      pictureImg2: "",
      pictureImg3: "",
      pictureImg4: "",
      pictureImg5: "",
      pictureImg6: "",
      type: "" //注册的用户类型
    };
  },
  watch:{
    '$route.query.name'(newData){
      // console.log('数据'+newData)
        this.lookkhName = newData;
    }
  },
  computed: {
    area() {
      return this.tProvince + " " + this.tCity;
    },
    khArea() {
      return this.khProvince + " " + this.khCity;
    },
    testImagesSmall(){
      return this.imagesSmall[0].file && this.imagesSmall[1].file && this.imagesSmall[2].file && this.imagesSmall[3].file && this.imagesSmall[4].file;
    },
    testImagesBus(){
      return this.imagesBus[0].file && this.imagesBus[1].file && this.imagesBus[2].file && this.imagesBus[3].file && this.imagesBus[4].file;
    }
  },
  vuelidation: {
    data: {
      platform: {
        required: true,
        betweenLength: {
          min: 1,
          max: 50
        },
        msg() {
          return "请输入正确平台商用户号格式，最多不能超过50位";
        }
      },
      merchant: {
        required: true,
        betweenLength: {
          min: 1,
          max: 100
        },
        mag() {
          return "请输入正确商户简称，最多不能超过100位";
        }
      },
      comOrclient: {
        required: true,
        betweenLength: {
          min: 1,
          max: 100
        },
        msg() {
          return "请输入正确的公司名称或客户名称，最多不能超过100位";
        }
      },
      hangye: {
        required: true,
        betweenLength: {
          min: 1,
          max: 4
        },
        msg() {
          return "请输入正确的行业类别，最多不能超过4位";
        }
      },
      bussDetail: {
        required: true,
        betweenLength: {
          min: 1,
          max: 200
        },
        msg() {
          return "请输入正确的企业详细地址，最多不能超过200位";
        }
      },
      faren: {
        betweenLength: {
          min: 0,
          max: 100
        },
        msg() {
          return "请输入正确的企业法人名字，最多不能超过100位";
        }
      },
      farenPhone: {
        required: true,
        betweenLength: {
          min: 1,
          max: 20
        },
        msg() {
          return "请输入正确的法人手机号，最多不能超过20位";
        }
      },
      farenEmail: {
        betweenLength: {
          min: 0,
          max: 60
        },
        msg() {
          return "请输入正确的企业法人邮箱，最多不能超过60位";
        }
      },
      farenConPer: {
        betweenLength: {
          min: 0,
          max: 100
        },
        msg() {
          return "请输入正确的企业法人联系人，最多不能超过100位";
        }
      },
      farenConPerPhone: {
        betweenLength: {
          min: 0,
          max: 11
        },
        msg() {
          return "请输入正确的企业法人联系人手机号，最多不能超过11位";
        }
      },
      farenZj: {
        required: true,
        betweenLength: {
          min: 1,
          max: 80
        },
        msg() {
          return "请填写正确的企业法人证件号，最多不能超过80位";
        }
      },
      farenZjTime: {
        betweenLength: {
          min: 0,
          max: 8
        },
        msg() {
          return "请填写正确的企业法人证件有效期，最多不能超过8位";
        }
      },
      yingYe: {
        betweenLength: {
          min: 0,
          max: 40
        },
        msg() {
          return "请填写正确的营业执照号，最多不能超过40位";
        }
      },
      yingYeTime: {
        betweenLength: {
          min: 0,
          max: 8
        },
        msg() {
          return "请填写正确的营业执照号有效期，最多不能超过8位";
        }
      },
      js: {
        required: true
      },
      kaiHu: {
        required: true,
        betweenLength: {
          min: 1,
          max: 100
        },
        msg() {
          return "请填写正确的开户人，最多不能超过100位";
        }
      },
      khZjType: {
        required: true,
        betweenLength: {
          min: 2,
          max: 2
        },
        msg() {
          return "请填写正确的开户人证件类型";
        }
      },
      yhYlPhone: {
        required: true,
        betweenLength: {
          min: 11,
          max: 11
        },
        msg() {
          return "请填写正确的银行预留手机号码,为11位";
        }
      },
      kfPhone: {
        betweenLength: {
          min: 10,
          max: 12
        },
        msg() {
          return "请填写正确的客服电话，最少为10位，最多为12位";
        }
      },
      jgPhone: {
        betweenLength: {
          min: 10,
          max: 10
        },
        msg() {
          return "请填写10位的机构号";
        }
      },
      khZjHao: {
        required: true,
        betweenLength: {
          min: 1,
          max: 50
        },
        msg() {
          return "请填写正确的开户人证件号，最多不能超过50位";
        }
      },
      tProvince: {
        required: true,
        msg() {
          return "请选择省市区";
        }
      },
      tCity: {
        required: true,
        msg() {
          return "请选择省市区";
        }
      },
      tArea: {
        required: true,
        msg() {
          return "请选择省市区";
        }
      },
      tXiaoqu: {
        required: true,
        betweenLength: {
          min: 2,
          max: 26
        },
        msg() {
          return "请输入并选择附近小区";
        }
      }
    }
  },
  created() {
    this.wxconfig();
    this.industry();
    this.getBank();
  },

  methods: {
    // 请求银行行别列表
    getBank() {
      this.typeList = [];
      this.khNameList = [];
      this.$reqGet(CLEARN_BANK).then(res => {
        //数据请求成功
        if (res.data.success) {
          res.data.data.forEach((value)=>{
              this.typeList.push(value.bankName);
              this.khNameList.push(value.bankAddress)
          })
        }
        //数据请求失败
        else {
          console.log("失败");
        }
      });
    },
    // 请求行业类别
    industry() {
      this.$reqGet(CLEARN_INDUSTRY).then(res => {
        //数据请求成功
        let HangYeData = [];
         this.columnsHangYe = [];
        this.columnsHangYeZiMu = [];
        if (res.data.success) {
          HangYeData = res.data.data;
          this.columnsHangYeZiMu = res.data.data;
          if (HangYeData) {
            for (let i = 0; i < HangYeData.length; i++) {
              this.columnsHangYe.push(HangYeData[i].industryName)
            
            }
          }
        }
        //数据请求失败
        else {
          console.log("失败");
        }
      });
    },
    //5.8
    onClickLeft() {
      this.$router.push({path:'/user'})
    },
    //客户类型 小微
    afterReadSmall(i) {
      let vm = this;
      return file => {
        vm.imagesSmall[i].file = file;
        let fd = new FormData();
        fd.append("file", file.file);
         this.$reqPost(UPLOAD_FILE, fd, {
          dataType: "json"
        }).then(res=>{
            if (i == 2) {
              vm.pictureImg4 = res.data.key;
            }
            if (i == 3) {
              vm.pictureImg5 = res.data.key;
            } 
            if (i==0){
              vm.pictureImg1 = res.data.key;
            } 
            if (i==1) {
              vm.pictureImg2 = res.data.key;
            }
            if (i==4) {
              vm.pictureImg6 = res.data.key;
            }
        }).catch(res => {
          this.$dialog.alert({
            title: "警告",
            message: res.data.msg
          });
        })
      };
    },
    //客户类型 企业
    afterReadBus(i) {
      let vm = this;
      return file => {
        vm.imagesBus[i].file = file;
        let fd = new FormData();
        fd.append("file", file.file);
         this.$reqPost(UPLOAD_FILE, fd, {
          dataType: "json"
        }).then(res=>{
            if (i == 2) {
              vm.pictureImg3 = res.data.key;
            } 
            if (i == 3) {
              vm.pictureImg6 = res.data.key;
            }
            if (i==0){
              vm.pictureImg1 = res.data.key;
            } 
            if (i==1) {
              vm.pictureImg2 = res.data.key;
            } 
            if (i==4) {
             // vm.pictureImg2 = res.data.key;
            }
        }).catch(res => {
          this.$dialog.alert({
            title: "警告",
            message: res.data.msg
          });
        })
      };
    },
    validInfo() {
      // if (!this.mixValid()) {
      //   return;
      // }
      if (!this.testImagesSmall) {
        this.$toast('有照片未上传！');
        return;
      }
      if (!this.testImagesBus) {
        this.$toast('有照片未上传！');
        return;
      }
      this.saveUserInfo();
    },
    saveUserInfo() {
      let shop = {
        cust_type: this.centerTextZiMu, //客户类型字母
        another_name: this.merchant, //商户简称
        custname: this.comOrclient, //客户名称或公司名称
        industry: this.hangYeTextZiMu, //行业类别
        province: this.tProvince, //企业信息地址
        city: this.tCity,
        company_addr: this.bussDetail, //企业详细地址
        legal_name:this.faren,//企业法人名字
        legal_tel: this.farenPhone, //企业法人手机号
        legal_cert_no: this.farenZj, //企业法人证件号
        settle_type: "1",
        bank_account_no: this.acount, //银行账号
        bank_account_name: this.kaiHu, //开户人
        bank_account_type: this.zhTypeTextZiMu, //银行账户类型
        bank_card_type: this.yhTypeTextZiMu, //银行卡类型
        bank_name: this.lookkhName, //开户行名称
        bank_type: this.typeText, //银行行别
        bank_province: this.khProvince, //开户行所在地省份
        bank_city: this.khCity,
        bank_telephone_no: this.yhYlPhone, //银行预留手机号
        cert_no: this.khZjHao, //开户人证件号
        centreId: this.user.centreId,
        // mid: this.user.teamid,
        mid:123456,
        id: this.user.id,
        type: this.type //团长,供应商或者服务中心
      };
      if (this.pictureImg1) {//身份证正面照
          shop.pictureImg1 = this.pictureImg1;
      }
      if (this.pictureImg2) {//身份证反面照
          shop.pictureImg2 = this.pictureImg2;
      }
      if (this.pictureImg3) {//营业执照
          shop.pictureImg3 = this.pictureImg3;
      }
      if (this.pictureImg4) {//银行卡正面照
          shop.pictureImg4 = this.pictureImg4;
      }
      if (this.pictureImg5) {//银行卡反面照
          shop.pictureImg5 = this.pictureImg5;
      }
      if (this.pictureImg6) {//客户协议书
          shop.pictureImg6 = this.pictureImg6;
      }
      this.$reqPost(CLEARN_REGISTER, shop).then(res => {
        // if (res.data.data > 0) {
        //   this.$toast.success("提交成功，1秒后转到首页");
        //   let vm = this;
        //   setTimeout(() => {
        //     vm.$router.push({
        //       name: "home"
        //     });
        //   }, 1000);
        // } else {
        //   this.$toast.fail("提交注册失败");
        // }
      });
    },

    onAreaConfirm(datas) {
      this.showArea = false;
      this.tProvince = datas[0].name;
      this.tCity = datas[1].name;
    },
    onKhNameConfirm(value, index) {
      this.showKhName = false;
      this.khNameText = value;
    },
    onTypeConfirm(value, index) {
      this.showType = false;
      this.typeText = value;
    },
    onKhAreaConfirm(datas) {
      this.showKhArea = false;
      this.khProvince = datas[0].name;
      this.khCity = datas[1].name;
    },
    onCenterConfirm(value, index) {
      for (let key in this.columnsObj) {
        if (this.columnsObj[key] == value) {
          this.centerTextZiMu = key;
        }
      }
      this.centerText = value;
      this.showCenter = false;
    },
    onRegUserConfirm(value, index) {
      if (value == "团长") {
        this.type = 1;
      }
      if (value == "供应商") {
        this.type = 2;
      }
      if (value == "服务中心") {
        this.type = 3;
      }
      this.regUserText = value;
      this.showRegUser = false;
    },
    onAttrConfirm(value, index) {
      this.merAttrText = value;
      this.showmerAttr = false;
    },
    onHangYeConfirm(value, index) {
      this.columnsHangYeZiMu.forEach((currentValue)=>{
        if (currentValue.industryName == value) {
            this.hangYeTextZiMu = currentValue.industryType
        }
      })
      this.hangYeText = value;
      this.showHangYe = false;
    },
    onZhConfirm(value, index) {
      for (let key in this.columnsZhObj) {
        if (this.columnsZhObj[key] == value) {
          this.zhTypeTextZiMu = key;
        }
      }
      this.zhTypeText = value;
      this.showZhType = false;
    },
    onYhConfirm(value, index) {
      for (let key in this.columnsYhObj) {
        if (this.columnsYhObj[key] == value) {
          this.yhTypeTextZiMu = key;
        }
      }

      this.yhTypeText = value;
      this.showYhType = false;
    }
  },

  components: {
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Area.name]: Area,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [NavBar.name]: NavBar
  }
};
</script>

<style lang="scss" scoped>
.clean {
  padding-top: 45px;
  box-sizing: border-box;
  .fixedTop {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    background-color: $green;
    color: white;
    margin-bottom: 50px;
    .kh {
      position: relative;
      .khChange {
        position: absolute;
        top: 44px;
      }
    }
  }
  .user_image_upload {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid $border-color;
    margin-left: 10px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: $border-color;
    }
  }
  .van-cell-group {
    margin-bottom: 10px;
  }
  .image_text {
    flex: 1;
    text-align: left;
    color: gray;
    font-size: 12px;
  }
}
.nav_bar {
  position: fixed;
  background-color: $red;
  color: white;
  width: 100%;
}
</style>
